<template>
  <div class="videoins-container">
    <div id="videoins"></div>
    <div class="page centerbox">
      <span class="el-icon-arrow-left pointer" @click="last"></span>
      <span>{{page}}</span>
      <span>/</span>
      <span>{{totalPage}}</span>
      <span class="el-icon-arrow-right pointer" @click="next"></span>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import PreviewOCX from "@/utils/PreviewClass.js";
@Component
export default class extends Vue {
  PreviewOCX: any = null;
  mounted() {
    let ocx = this.init();
    ocx.setWindowsLayout(1);
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
    ocx.setCallBack();
  }
  last() {
    if (this.page > 1) {
      this.page--;
    }
  }
  next() {
    if (this.totalPage > this.page) {
      this.page++;
    }
  }
  // 初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "videoins",
      theme: "",
    }));
    return ocx;
  }

  // 播放视频列表
  shipinData = {
    stationId: "",
    list: [
      {
        indexCode: "",
        stationId: "",
      },
    ],
  };
  page = 1;
  get newshipinData() {
    let shipinData = JSON.parse(JSON.stringify(this.shipinData));
    shipinData.list = shipinData.list.slice((this.page - 1) * 4, this.page * 4);
    return shipinData;
  }
  get totalPage() {
    let list = this.shipinData.list;
    console.log(list);
    let length = list.length;
    let total = Math.ceil(length / 4);
    console.log(total);
    return total;
  }
  @Watch("newshipinData")
  setPreview(newshipinData) {
    console.log("newshipinData:", newshipinData);

    let ocx = this.PreviewOCX;
    // console.log(ocx.windowNumber);
    let list = newshipinData.list;
    let length = list.length;
    let stationId = this.newshipinData.stationId;
    if (stationId === "1500000001") {
      // if (length <= 1) {
      //   ocx.setWindowsLayout(1);
      // } else if (length <= 4) {
      //   ocx.setWindowsLayout(2);
      // } else {
      //   ocx.setWindowsLayout(3);
      // }
      if (length <= 1) {
        ocx.setWindowsLayout(1);
      } else {
        ocx.setWindowsLayout(2);
      }
    }
    list.forEach((v) => {
      this.getPreview(v);
    });
    console.log("list:", list);
  }

  // 获取视频流
  async getPreview(data) {
    // let data = {
    //   indexCode: "001246",
    //   stationId: "100435539",
    // };

    await (this as any).$services
      .getPreview({ data, dataType: "text" })
      .then((xml: any) => {
        // if (xml) {
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        if (ocx.startPreview(winindex, xml) === 0) {
          if (data.yzwbm) {
            this.ptzGetPoint(data.yzwbm, this.PreviewOCX.PTZ_CMD_START);
          }
          if (ocx.setSelectWindow(winindex + 1) === -1) {
            ocx.setSelectWindow(0);
          }
        }
        return true;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  setYzw(yzwBm) {
    if (this.ptzSetPoint(yzwBm, this.PreviewOCX.PTZ_CMD_START) == 0) {
      console.log("预置位设置成功");
    } else {
      console.log("预置位设置失败");
    }
  }

  //云台预置点设置
  ptzSetPoint(pointIndex, action) {
    var xml = [];
    xml.push('<?xml version="1.0" encoding="utf-8"?>');
    xml.push("<PtzControl>");
    xml.push("<Action>" + action + "</Action>");
    xml.push("<Priority>50</Priority>");
    xml.push("<Speed>5</Speed>");
    xml.push("<Preset Index =" + pointIndex + " DwellTime=50 Speed=5 />");
    xml.push("</PtzControl>");
    if (
      this.PreviewOCX.ptzControl(
        this.PreviewOCX.PRESET_CMD_SET_PRESET,
        xml.join("")
      ) == this.PreviewOCX.SUCCESS
    ) {
      return this.PreviewOCX.SUCCESS;
    } else {
      return this.PreviewOCX.FAILED;
    }
  }
  // 转动到预置位
  ptzGetPoint(pointIndex, action) {
    console.log(123, pointIndex);
    var xml = [];
    xml.push('<?xml version="1.0" encoding="utf-8"?>');
    xml.push("<PtzControl>");
    xml.push("<Action>" + action + "</Action>");
    xml.push("<Priority>50</Priority>");
    xml.push("<Speed>5</Speed>");
    xml.push("<Preset Index =" + pointIndex + " DwellTime=50 Speed=5 />");
    xml.push("</PtzControl>");
    if (
      this.PreviewOCX.ptzControl(
        this.PreviewOCX.PRESET_CMD_GOTO_PRESET,
        xml.join("")
      ) == this.PreviewOCX.SUCCESS
    ) {
      console.log("预置位调用成功");
      return this.PreviewOCX.SUCCESS;
    } else {
      console.log("预置位调用失败");
      return this.PreviewOCX.FAILED;
    }
  }
  tokenCallEvent(reqID) {
    let data = {
      // stationId: "100435539",
      stationId: this.shipinData.stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        // console.log(123, result);
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.videoins-container {
  width: 100%;
  height: 100%;
  // background: rgba(0, 0, 0, 0.9);
  position: relative;
  #videoins {
    width: 100%;
    height: calc(100% - 0.3rem);
  }
  .iframe {
    width: 100%;
    height: 10%;
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: 1;
    // opacity: 0;
    background: none;
    // display: none;
  }
  .page {
    // position: absolute;
    width: 100%;
    height: 0.3rem;
    > span {
      margin: 0 0.02rem;
    }
  }
  .pointer {
    cursor: pointer;
  }
}
</style>

